<template>
  <div style="height: 95vh; position: relative">
    <n-layout position="absolute">
      <n-layout-header style="padding: 24px; display: flex; flex-direction: column; align-items: center" bordered>
        <div class="wrapper">
          <div class="option">
            <input checked="" value="option" name="btn" type="radio" class="input" id="radio-1" />
            <div class="btn">
              <span class="span">网站</span>
            </div>
          </div>
          <div class="option">
            <input value="option1" id="radio-2" name="btn" type="radio" class="input" />
            <div class="btn">
              <span class="span">素材</span>
            </div>
          </div>
          <div class="option">
            <input value="option2" name="btn" type="radio" class="input" />
            <div class="btn">
              <span class="span">创作</span>
            </div>
          </div>
          <div class="option">
            <input value="option3" name="btn" type="radio" class="input" />
            <div class="btn">
              <span class="span">自媒体</span>
            </div>
          </div>
        </div>

        <!-- <div>
          <n-input round placeholder="搜索">
            <template #suffix>
              <n-icon :component="FlashOutline" />
            </template>
          </n-input>
        </div> -->
      </n-layout-header>
      <n-layout has-sider position="absolute" style="top: 120px; bottom: 64px">
        <n-layout-sider
          collapse-mode="width"
          :collapsed-width="14"
          :show-collapsed-content="false"
          :width="240"
          :bordered="siderBordered"
          show-trigger="arrow-circle"
          content-style="padding: 24px;"
          @update:collapsed="siderBordered = !siderBordered"
        >
          <div>
            <n-anchor :show-rail="false" affix :trigger-top="24" :top="88" style="z-index: 1" ignore-gap>
              <n-anchor-link title="目录" href="#演示">
                <n-anchor-link title="前端相关" href="#card1" />
                <n-anchor-link title="UI相关" href="#card2" />
                <n-anchor-link title="素材相关" href="#card3" />
              </n-anchor-link>
              <n-anchor-link title="API" href="#API" />
            </n-anchor>
          </div>
        </n-layout-sider>
        <n-layout content-style="padding: 24px;display: flex;justify-content: center;">
          <n-card hoverable class="w-[92%]">
            <n-card title="前端相关" :bordered="false" id="card1" content-style="padding: 1rem;" class="my-3">
              <n-grid :x-gap="12" :y-gap="14" :cols="6">
                <n-grid-item v-for="i in 1" :key="i">
                  <div class="card">
                    <div class="img"></div>
                    <div class="textBox">
                      <div class="textContent">
                        <p class="h1">网站名称</p>
                      </div>
                      <p class="p">网站介绍 巴拉巴拉！！！</p>
                      <div></div>
                    </div>
                  </div>
                </n-grid-item>
              </n-grid>
            </n-card>
            <n-card title="ui相关" :bordered="false" id="card2" content-style="padding: 1rem;" class="my-3">
              <n-grid :x-gap="12" :y-gap="8" :cols="4">
                <n-grid-item v-for="i in 1" :key="i">
                  <div class="card">
                    <div class="img"></div>
                    <div class="textBox">
                      <div class="textContent">
                        <p class="h1">网站名称</p>
                      </div>
                      <p class="p">网站介绍 巴拉巴拉！！！</p>
                      <div></div>
                    </div>
                  </div>
                </n-grid-item>
              </n-grid>
            </n-card>
            <n-card title="素材相关" :bordered="false" id="card3" content-style="padding: 1rem;" class="my-3">
              <n-grid :x-gap="12" :y-gap="8" :cols="4">
                <n-grid-item v-for="i in 1" :key="i">
                  <div class="card">
                    <div class="img"></div>
                    <div class="textBox">
                      <div class="textContent">
                        <p class="h1">网站名称</p>
                      </div>
                      <p class="p">网站介绍 巴拉巴拉！！！</p>
                      <div></div>
                    </div>
                  </div>
                </n-grid-item>
              </n-grid>
            </n-card>
          </n-card>
        </n-layout>
      </n-layout>
      <n-layout-footer bordered position="absolute" style="height: 64px; padding: 24px; text-align: center">
        JM 导航 2.40.1 · Made by TuSimple
      </n-layout-footer>
    </n-layout>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { FlashOutline } from "@vicons/ionicons5";
import { NIcon } from "naive-ui";
import { BookOutline as BookIcon, PersonOutline as PersonIcon, WineOutline as WineIcon } from "@vicons/ionicons5";
const siderBordered = ref(true);
</script>

<style lang="scss" scoped>
/* From Uiverse.io by LightAndy1 */
.wrapper {
  --font-color-dark: #323232;
  --font-color-light: #fff;
  --bg-color: #efefef;
  --main-color: #1592e6;
  --secondary-color: #1592e6a8;
  position: relative;
  width: 40%;
  height: 46px;
  background-color: var(--bg-color);

  border-radius: 34px;
  display: flex;
  flex-direction: row;

  margin-bottom: 1rem;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.option {
  margin-right: 5px;
  width: 80.5px;
  height: 34px;
  position: relative;
  border-radius: 34px;
  transition: 0.25s cubic-bezier(0, 0, 0, 1);
}

.option:last-child {
  margin-right: 4px;
}

.option:hover {
  background-color: var(--secondary-color);
}

.option:hover .span {
  color: var(--font-color-light);
}

.input {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  appearance: none;
  cursor: pointer;
}

.btn {
  width: 100%;
  height: 100%;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.span {
  color: var(--font-color-dark);
  font-size: 18px;
  font-weight: 600;
}

.input:checked + .btn {
  background-color: var(--main-color);
  transition: 0.2s cubic-bezier(0, 0, 0, 1);
}

.input:checked + .btn .span {
  color: var(--font-color-light);
  transition: 0.25s cubic-bezier(0, 0, 0, 1);
}

/*  card class */

.card {
  width: 100%;
  max-width: 290px;
  height: 60px;
  background: #efefef;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
  backdrop-filter: blur(10px);
  transition: 0.5s ease-in-out;
  .img {
    width: 50px;
    height: 50px;
    margin-left: 10px;
    border-radius: 60px;
    background: linear-gradient(#d7cfcf, #9198e5);
  }

  .card:hover > .img {
    transition: 0.5s ease-in-out;
    background: linear-gradient(#9198e5, #712020);
  }

  .textBox {
    width: calc(100% - 90px);
    margin-left: 10px;
    color: rgb(0, 0, 0);
    font-family: "Poppins" sans-serif;
  }

  .textContent {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .span {
    font-size: 10px;
  }

  .h1 {
    font-size: 16px;
    font-weight: bold;
  }

  .p {
    font-size: 12px;
    font-weight: lighter;
  }
}

.card:hover {
  cursor: pointer;
  transform: scale(1.05);
}
</style>
